@font-face {
  font-family: 'lobster';
  src:url('Lobster-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
}
@font-face {
  font-family: 'slabo';
  src:url('Slabo.ttf')  format('truetype'); /* Safari, Android, iOS */
}
a{
	color:black;
}
a:hover{
	text-decoration:underline;
}
body{
	background:#2c3e50;
}
.outer-wrapper{
	float:left;
	display:block;
	background:#ecf0f1;
	text-align:$startSide;
	width:90%;
	margin:0 5%;
}
.header-wrapper{
	margin-top:-20px;
	height:120px;
	background:white;
	width:100%;
}
.header-wrapper h1{
	font-family: 'lobster', cursive;
	font-weight:400;
	padding:20px;
	color:#8e44ad;
	text-align:center;
}
.header-wrapper h1:hover{
	color:#9b59b6;
}
.dropdown{
	background:#9b59b6;
	line-height:30px;
}
.dropdown ul{
	margin:0;
	padding:0;
	list-style:none;
	color:white;
	text-align:center;
}
.dropdown ul li{
	display:inline-block;
	padding:0 5px;
	cursor:pointer;
}
.dropdown a{
	color:white;
	text-decoration:none;
}
.dropdown ul ul{
	display:none;
}
.dropdown ul li:hover ul{
	margin-left:-5px;
	display:block;
	position:absolute;
	background:#9b59b6;
	padding:2px 4px 4px;
	min-width:170px;
	-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 3px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 3px 5px 0px rgba(50, 50, 50, 0.75);
	z-index:1;
}
.dropdown ul ul li{
	display:block;
	text-align:left;
	color:white;
	padding:0 4px;
}
.dropdown ul li:hover,
.dropdown ul ul li:hover{
	background:#A66BBE;
	cursor:pointer;
}
.grup-kiri{
	float:left;
	width:79%;
}
.tengah{
	margin:10px;
}
#sidebar-kiri{
	float:left;
	width:26%;
}
#sidebar-kanan{
	float:right;
	width:19.7%;
}
#sidebar-kiri,
#sidebar-kanan{
	background:white;
	height:240px;
	-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 3px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 3px 5px 0px rgba(50, 50, 50, 0.75);
}
#sidebar-kiri h3,
#sidebar-kanan h3{
	margin:0;
	line-height:40px;
	text-align:center;
	color:white;
	font-family:slabo;
	-webkit-border-radius:4px 4px 0 0;
	-moz-border-radius:4px 4px 0 0;
	border-radius:4px 4px 0 0;
}
#sidebar-kiri h3,
#sidebar-kanan h3{
	background:#9b59b6;
}
#konten-sidebar{
	max-height:200px;
	overflow:auto;
}
#main-wrapper h3{
	background:#9b59b6;
	margin:0;
	text-align:center;
	font-family:slabo;
	line-height:40px;
	color:white;
}
#main-wrapper{
	float:right;
	width:72%;
}
#main-wrapper #gambar-posting{
	text-align:center;
}
#gambar-posting .efek{
	max-width:300px;
	height:auto;
	border:2px solid #9b59b6;
	margin:5px auto;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	z-index:0;
	-webkit-filter:grayscale(60%);
	filter:grayscale(60%);
}
#gambar-posting .efek:hover{
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
}
#main-wrapper #tanggal{
	display:block;
	width:auto;
	padding:5px 10px;
	background:#8e44ad;
	color:white;
}
#halaman{
	text-align:justify;
	margin:0 0 20px;
	background:white;
	-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 3px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 3px 5px 0px rgba(50, 50, 50, 0.75);
}
#halaman:hover  #tanggal{
	background:#9b59b6;
}
#halaman:hover #gambar-posting .efek{
	-webkit-filter:grayscale(0%);
	filter:grayscale(0%);
}
.blok-komentar-fb{
	display:block;
	margin:0 auto;
	width:auto;
	background:white;
	overflow:auto;
}
.footer-wrapper{
	float:left;
	padding:1% 0;
	width:100%;
	background:black;
	display:block;
}
#footer-grup-kiri{
	display:inline-block;
	width:65%;
	outline:1px solid white;
}
#footer-kiri,#footer-tengah{
	display:inline-block;
	width:40%;
	padding:0 0.5%;
	margin-left:4%;
	color:white;
	outline:1px solid white;
}
#footer-kanan{
	display:inline-block;
	float:right;
	color:white;
	width:24%;
	padding:0 0.5%;
	margin:0 2.5%;
	outline:1px solid white;
}
#credit p{
	float:right;
	padding:0 5px;
}
@media (max-width:670px){
	.header-wrapper h1{
		font-size:25px
	}
	img{
		height:20%;
	}
	#sidebar-kiri h3,#sidebar-kanan h3,#main-wrapper h3{
		font-size:10px;
	}
}
@media(max-width:410px){
	.header-wrapper h1{
		font-size:20px;
		padding:10px;
	}
}
@media(max-width:650px){
	.dropdown ul li{
		display:block;
	}
}